<template>
  <div>
    <van-nav-bar title="搜搜商品" left-arrow @click-left="$router.go(-1)" />
    <!-- 头部搜索框 -->
    <van-search
      placeholder="输入搜索的商品名"
      v-model="keyword"
      shape="round"
    />
    <!-- 头部搜索框 -->
    <!-- 商品列表区域 -->
    <gList :lists="lists" />
    <!-- 商品列表区域 -->
  </div>
</template>
<script>
import axios from "axios";
import gList from "./gList";
export default {
  components: {
    gList,
  },
  data() {
    return {
      keyword: "",
      goodsList: [], //商品列表
    };
  },
  mounted() {
    axios.get("/json/list1.json").then((res) => {
      console.log(res);
      this.goodsList = res.data.result;
    });
  },
  computed: {
    lists() {
      // 把本地存储的数据直接赋值
      return this.goodsList.filter(item=>{
          return item.title.indexOf(this.keyword) > -1;
      })
    },
  },
};
</script>